<template>
  <div ref="chartRef" style="width:100%; height: 300px;"></div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';
import * as echarts from 'echarts';

// 接收父组件传递的 consultantsData 属性
const props = defineProps<{
  consultantsData: {
    name: string;
    totalappointments: number; // 总预约次数
    completedappointments: number; // 已完成预约次数
    canceledappointments: number; // 已取消预约次数
    averagerating: number; // 平均评分
  }[];
}>();

const chartRef = ref<HTMLDivElement | null>(null); // 用于引用图表容器

const initChart = () => {
  if (!chartRef.value) return;

  const chart = echarts.init(chartRef.value);
  const option = {
    tooltip: {},
    legend: {
      data: ['总预约次数', '已完成预约次数', '已取消预约次数', '平均评分'],
    },
    xAxis: {
      type: 'category',
      data: props.consultantsData.map(item => item.name), // 咨询师姓名
    },
    yAxis: [
      {
        type: 'value',
        name: '预约次数',
      },
      {
        type: 'value',
        name: '平均评分',
        position: 'right',
      },
    ],
    series: [
      {
        name: '总预约次数',
        type: 'bar',
        data: props.consultantsData.map(item => item.totalappointments),
      },
      {
        name: '已完成预约次数',
        type: 'bar',
        data: props.consultantsData.map(item => item.completedappointments),
      },
      {
        name: '已取消预约次数',
        type: 'bar',
        data: props.consultantsData.map(item => item.canceledappointments),
      },
      {
        name: '平均评分',
        type: 'line',
        data: props.consultantsData.map(item => item.averagerating),
        yAxisIndex: 1,
      },
    ],
    color: ['#4caf50', '#2196f3', '#ff9800', '#f44336'],
  };

  chart.setOption(option);

  // 处理窗口大小变化
  window.addEventListener('resize', chart.resize);
};

onMounted(initChart);

// 监听数据变化
watch(() => props.consultantsData, initChart, { deep: true });
</script>

<style scoped>
/* 这里可以添加一些样式 */
</style>
